/* 
JSX中实现条件渲染，可以三种方式
1. 短路运算
2. 三元表达式
3. 如果是更加复杂的结构，函数中结合if/else来实现
 */

import { Button, StyleSheet, View } from 'react-native';

export default function App() {
  const showBtn = () => {
    if (10 === 10) {
      return <Button title="男"></Button>;
    } else {
      return <Button title="女"></Button>;
    }
  };
  return (
    <>
      <View>
        {/* 短路运算符 */}
        <View>{true && <Button title="男"></Button>}</View>
        <View>{false && <Button title="女"></Button>}</View>
        <View>
          {/* 三元表达式 */}
          {true ? <Button title="男"></Button> : <Button title="女"></Button>}
        </View>

        <View>{showBtn()}</View>
      </View>
    </>
  );
}

const styles = StyleSheet.create({});
